<template>
  <div>
    <div class="star-list">
      <template v-for="(item, index) in list" :key="index">
        <star-item :item="item" :index="index" @starClick="starClick"></star-item>
      </template>
    </div>
  </div>
</template>
    
<script>
import chuan from '@/assets/img/chuan.jpg';
import yue from '@/assets/img/yue.jpg';
import starItem from '@/components/star-item.vue';
export default {
  name: 'AfunctionOne',
  components: { starItem },
  data() {
    return {
      list: [
        {
          img: chuan,
          type: '川菜',
          introduce: '爱神的箭安达就开始金阿奎睡你的觉看书肯德基那是科技的你就看看到那时间看到',
          taste: '很辣',
          name: '测试名称',
          star: 0,
          publish: {
            name: '测试用户',
            time: '2022-10-02'
          }
        },
        {
          img: yue,
          type: '鲁菜',
          introduce: '爱神的箭安达就开始金阿奎睡你的觉看书肯德基那是科技的你就看看到那时间看到',
          taste: '很辣',
          name: '测试名称',
          star: 1,
          publish: {
            name: '测试用户',
            time: '2022-10-02'
          }
        }
      ]
    }
  },
  methods: {
    starClick(star, index) {
      if (star == 0) {
        this.list[index].star = 1;
      } else {
        this.list[index].star = 0;
      }
    }
  }
}
</script>
    
<style scoped>
.w-200 {
  width: 200px;
}

.search-title {
  text-align: center;
  font-size: 25px;
}

.list-box_sty {
  background: #BBEAD5;
  border: 1px solid #446DA9;
  border-radius: 8px;
}

.item-img {
  width: 280px;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 30px;
}
</style>
    